<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<%@include file="/common/head.jsp" %>

<c:set var="module" value="user"/>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
		<form action="${ctx }/admin/user/save?id=${n.id }" id="detail-form" class="form-horizontal" method="post">
			<div class="form-group">
                 <label class="col-sm-2 control-label">用户名</label>
                 <div class="col-sm-10">
                 	<input type="text"  placeholder="用邮箱作为用户名" class="form-control" id="username" name="username" ${empty n.id ? '' : 'readonly' } value="${n.username }">
                     <label class="errorClass" id="usernameError">${errors.username }</label>
                 </div>
             </div>	
             <div class="form-group">
                 <label class="col-sm-2 control-label">姓名</label>
                 <div class="col-sm-10">
                 	<input type="text" class="form-control" id="nickname" name="nickName" ${empty n.id ? '' : 'readonly' } value="${n.nickName }">
                     <label class="errorClass" id="nicknameError">${errors.nickName }</label>
                 </div>
             </div>
             <div class="form-group">
                 <label class="col-sm-2 control-label">手机号</label>
                 <div class="col-sm-10">
                 	<input type="text" class="form-control" id="email" name="email" ${empty n.id ? '' : 'readonly' } value="${n.email }">
                     <label class="errorClass" id="emailError">${errors.email}</label>
                 </div>
             </div>
		</form>
</div>

<%@include file="/common/foot.jsp" %>

    <style type="text/css">
        .errorClass{
            color: #f40000;      border:1px solid #ffb8b8; background-color: #fef2f2; padding: 4px 4px 4px 4px;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            /*
             * 1. 得到所有的错误信息，循环遍历之。调用一个方法来确定是否显示错误信息！
             */
            $(".errorClass").each(function() {
                showError($(this));//遍历每个元素，使用每个元素来调用showError方法
            });
            /*
             * 3. 输入框得到焦点隐藏错误信息
             */
            $(".form-control").focus(function() {
                var labelId = $(this).attr("id") + "Error";//通过输入框找到对应的label的id
                $("#" + labelId).text("");//把label的内容清空！
                showError($("#" + labelId));//隐藏没有信息的label
            });

            /*
             * 4. 输入框失去焦点进行校验
             */

            $(".form-control").blur(function() {
                var id = $(this).attr("id");//获取当前输入框的id
                var funName = "validate" + id.substring(0,1).toUpperCase() + id.substring(1) + "()";//得到对应的校验函数名
                eval(funName);//执行函数调用
            });

            /*

             * 5. 表单提交时进行校验
             */
          /*  $("#submitBtn").sumbit(function(){
                var bool = true;//表示校验通过
                if(!validateUsername()) {
                    bool = false;
                }
                if(!validateEmail()){
                    bool=false;
                }
                if(!validatenickNameError()){
                    bool=false;
                }
                return bool;
            });*/

        });

        /*
         * 登录名校验方法
         */
        function validateUsername() {
            var id = "username";
            var value = $("#" + id).val();//获取输入框内容
            /*
             * 1. 非空校验
             */
            if(!value) {
                /*
                 * 获取对应的label
                 * 添加错误信息
                 * 显示label
                 */
                $("#" + id + "Error").text("用户名不能为空！");
                showError($("#" + id + "Error"));
                return false;
            }

            /*
             * 2. Email格式校验
             */
            if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) {
                /*
                 * 获取对应的label
                 * 添加错误信息
                 * 显示label
                 */
                $("#" + id + "Error").text("错误的Email格式！");
                showError($("#" + id + "Error"));
                false;
            }
            /*
             * 3. 是否注册校验
             */

            $.ajax({
                url:"${ctx}/admin/user/add",//要请求的servlet
                data:{method:"ajaxValidateLoginname", username:value},//给服务器的参数
                type:"POST",
                dataType:"json",
                async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。
                cache:false,
                success:function(result) {
                    if(!result) {//如果校验失败
                        $("#" + id + "Error").text("用户名已被注册！");
                        showError($("#" + id + "Error"));
                        return false;
                    }
                }
            });
            return true;
        }


        function validateEmail() {
            var id = "email";
            var value = $("#" + id).val();//获取输入框内容
            /*
             * 1. 非空校验
             */
            if(!value) {
                /*
                 * 获取对应的label
                 * 添加错误信息
                 * 显示label
                 */
                $("#" + id + "Error").text("手机号不能为空！");
                showError($("#" + id + "Error"));
                return false;
            }
            /*
             * 2. 手机格式校验
             */
            if(!/^1[3|4|5|7|8][0-9]{9}$/.test(value)) {
                /*
                 * 获取对应的label
                 * 添加错误信息
                 * 显示label
                 */
                $("#" + id + "Error").text("错误的手机号格式！");
                showError($("#" + id + "Error"));
                false;
            }


            return true;
        }

        function validateNickname() {
            var id = "nickname";
            var value = $("#" + id).val();//获取输入框内容
            /*
             * 1. 非空校验
             */
            if(!value) {
                /*
                 * 获取对应的label
                 * 添加错误信息
                 * 显示label
                 */
                $("#" + id + "Error").text("姓名不能为空！");
                showError($("#" + id + "Error"));
                return false;
            }
            return true;
        }




        /*
         * 判断当前元素是否存在内容，如果存在显示，不页面不显示！
         */
        function showError(ele) {
            var text = ele.text();//获取元素的内容
            if(!text) {//如果没有内容
                ele.css("display", "none");//隐藏元素
            } else {//如果有内容
                ele.css("display", "");//显示元素
            }
        }
    </script>
<script>
$('#provinceId').change(function() {
	var provinceId = $(this).val();
	$('#cityId').html('');
	$('#districtId').html('');
	if (provinceId != '') {
		$.ajax({
			url: "${ctx}/admin/province/findArea?provinceId=" + provinceId,
			dataType: "json",
			success: function(array) {
				$('#cityId').append('<option value="">城市</option>');
				for (var i = 0; i < array.length; i++) {
					var obj = array[i];
					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
					$('#cityId').append(option);	
				}
			}
		});
	}
	
});

$('#cityId').change(function() {
	var cityId = $(this).val();
	$('#districtId').html('');
	if (cityId != '') {
		$.ajax({
			url: "${ctx}/admin/province/findArea?cityId=" + cityId,
			dataType: "json",
			success: function(array) {
				$('#districtId').append('<option value="">地区</option>');
				for (var i = 0; i < array.length; i++) {
					var obj = array[i];
					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
					$('#districtId').append(option);	
				}
			}
		});
	}
	load_filter_user();
});

$('#districtId').change(function() {
	load_filter_user();
});

$(document).ready(function() {
	init_images('image1');
});


</script>
</body>
</html>
